<template>
  <draggable
    class="draggable-container"
    v-model="arr"
    group="plugin"
    animation="300"
    @input="handleInput"
  >
    <transition-group class="conf-detail__container">
      <div
        v-for="(item, key) in value"
        :key="`${item.type}-${key}`"
        :class="{ active: key === selectKey }"
        class="conf-item__container"
        @click="handleClick(value, key)"
      >
        <div v-if="item.title" class="conf-item__label">
          {{ item.title ? item.title + ":" : "" }}
        </div>
        <div class="conf-item__content">
          <form-item
            :ref="key"
            :prop-key="key"
            :select-key="selectKey"
            :form-item-config="item"
          ></form-item>
        </div>
      </div>
    </transition-group>
  </draggable>
</template>

<script>
import draggable from "vuedraggable";
import FormItem from "./FormItem";

export default {
  name: "draggableForm",
  components: {
    draggable,
    FormItem,
  },
  props: {
    value: Object,
    floor: Number,
    selectKey: String,
    parentType: String,
  },
  data() {
    return {
      arr: [],
    };
  },
  methods: {
    handleInput() {
      console.log("handleInput===", this.arr);
      const value = {};
      this.arr.forEach((item) => {
        let { id, ...rest } = item;
        value[id] = rest;
        console.log("item", item);
        delete value[item.id].id;
        if (JSON.stringify(item) === JSON.stringify(value[this.selectKey])) {
          this.$emit("select-change", { value, key: this.selectKey });
        }
      });
      console.log("handleInput==value==", value);
      this.$emit("value-change", value);
    },
    handleClick(value, key) {
      this.$emit("select-change", { value, key });
    },
  },
};
</script>

<style lang="less" scoped>
.draggable-container {
  flex: 1;
  max-height: 100%;
  background: #fff;
  width: 100%;
  overflow: auto;
  padding: 10px;
  border: 1px solid #d9d9d9;

  .conf-detail__container {
    display: block;
    min-height: 200px;
    overflow: auto;

    .conf-item__container {
      display: flex;
      padding: 12px 8px;
      border: 1px dashed @color-border;
      cursor: move;
      &.active {
        border: 1px solid @color-primary;
      }

      .conf-item__label {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 120px;
        max-height: 32px;
        padding-right: 12px;
        font-size: 14px;
        text-align: right;
      }
      .conf-item__content {
        flex: 1;
        width: 0;
      }
    }
  }
}
</style>
